import { Button, Card, Form, Input, Upload, message } from "antd";
import React from "react";
import styles from "./index.less"
//登录页logo
import p1 from "@/assets/logoTitle.png"
//首页logo
import p2 from "@/assets/logo.png"
//登录页背景图
import p3 from "@/assets/loginBg.png"
//登录页左侧海报
import p4 from '@/assets/loginBanner.png'
import { editSystemPlatformInfo, getSystemPlatformInfo } from "@/services/platformManagement";

class InfoSetting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loginLogo: '',
      homeLogo: '',
      loginBg: '',
      loginPoster: '',
      bottomInfo: "",
      loading: false
    }
  }

  componentDidMount() {
    this.getInfo()
  }

  getInfo = (flag) => {
    this.setState({ loading: true }, async () => {
      const res = await getSystemPlatformInfo()
      window.localStorage.setItem("platformInfo", JSON.stringify(res))
      if (flag && flag === 'reload') {
        location.reload();
        return
      };
      this.setState({
        loginLogo: res.loginLogoUrl ? res.loginLogoUrl : p1,
        homeLogo: res.indexLogoUrl ? res.indexLogoUrl : p2,
        loginBg: res.backgroundUrl ? res.backgroundUrl : p3,
        loginPoster: res.advertiseUrl ? res.advertiseUrl : p4,
        bottomInfo: res.bottomInfo,
        loading: false
      })
    })
  }

  beforeUpload = (file) => {
    let b = /\.(png|jpg|gif)$/;
    let a = file.name.toLowerCase();

    const pig = b.test(a);
    const isJPG = file.type;
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!pig) {
      if (!isLt2M) {
        message.error("请上传小于2M的图片");
      } else {
        message.error("请上传图片格式");
      }
    } else {
      if (!isLt2M) {
        message.error("请上传小于2M的图片");
      }
    };
    return isJPG && isLt2M && pig;
  };

  handleChangeImage = (file, type) => {
    if (file.file.status === "done") {
      this.setState({ [type]: file.file.response.url, });
    }
  };

  changeInfo = e => {
    this.setState({ bottomInfo: e.target.value })
  }

  doSave = async () => {
    const { loginLogo, loginBg, loginPoster, bottomInfo, homeLogo } = this.state;
    const res = await editSystemPlatformInfo({
      indexLogoUrl: homeLogo == p2 ? '' : homeLogo,
      loginLogoUrl: loginLogo == p1 ? '' : loginLogo,
      backgroundUrl: loginBg == p3 ? '' : loginBg,
      advertiseUrl: loginPoster == p4 ? '' : loginPoster,
      bottomInfo: bottomInfo,
    });
    message.info(res.message);
    this.getInfo('reload');
  }

  render() {
    const { loginLogo, homeLogo, loginBg, loginPoster, bottomInfo, loading } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };

    return (
      <Card loading={loading}>
        <Form {...formItemLayout}>
          <Form.Item label="登录页logo">
            <Upload
              name='file'
              listType='picture'
              showUploadList={false}
              action='/cloud/file/upload'
              beforeUpload={this.beforeUpload}
              onChange={(info) => this.handleChangeImage(info, "loginLogo")}
              accept='.png,.jpg'
            >
              <img src={loginLogo} alt='file' className={styles.loginLogo} />
              <Button size={"small"}>选择文件</Button>
            </Upload>
            <span className={styles.tips}>登录页左上角logo图片，推荐图片尺寸134×48px</span>
          </Form.Item>
          <Form.Item label="首页logo">
            <Upload
              name='file'
              listType='picture'
              showUploadList={false}
              action='/cloud/file/upload'
              beforeUpload={this.beforeUpload}
              onChange={(info) => this.handleChangeImage(info, "homeLogo")}
              accept='.png,.jpg'
            >
              <img src={homeLogo} alt='file' className={styles.homeLogo} />
              <Button size={"small"}>选择文件</Button>
            </Upload>
            <span className={styles.tips}>首页左上角logo图片，推荐图片尺寸102×36px</span>
          </Form.Item>
          <Form.Item label="登录页背景图">
            <Upload
              name='file'
              listType='picture'
              showUploadList={false}
              action='/cloud/file/upload'
              beforeUpload={this.beforeUpload}
              onChange={(info) => this.handleChangeImage(info, "loginBg")}
              accept='.png,.jpg'
            >
              <img src={loginBg} alt='file' className={styles.loginBg} />
              <Button size={"small"}>选择文件</Button>
            </Upload>
            <span className={styles.tips}>登录页背景图片，推荐图片尺寸1920×1080px</span>
          </Form.Item>
          <Form.Item label="登录页宣传画">
            <Upload
              name='file'
              listType='picture'
              showUploadList={false}
              action='/cloud/file/upload'
              beforeUpload={this.beforeUpload}
              onChange={(info) => this.handleChangeImage(info, "loginPoster")}
              accept='.png,.jpg'
            >
              <img src={loginPoster} alt='file' className={styles.loginPoster} />
              <Button size={"small"}>选择文件</Button>
            </Upload>
            <span className={styles.tips}>登录页宣传画，推荐图片尺寸662×604px</span>
          </Form.Item>
          <Form.Item label="公司信息设置">
            <Input.TextArea autoSize value={bottomInfo} onChange={this.changeInfo} />
          </Form.Item>
          <Form.Item label=" " colon={false}>
            <Button type="primary" onClick={this.doSave}>保存</Button>
          </Form.Item>
        </Form>
      </Card>
    )
  }
}

export default InfoSetting